<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .pd24 {
        padding: 24px;
    }

    .mt24 {
        margin-top: 24px;
    }

    .dissolution__boot {
        width: 100%;
        height: 0;
        opacity: 1;
        border: 1px dashed #e0e0e0;
        margin: 40px auto auto auto;
    }

    .el-tabs--border-card>.el-tabs__header {
        background-color: rgb(234, 237, 244);
        border-bottom: 1px solid #E4E7ED;
        margin: 0;
    }

    .el-permission__content {
        width: 100%;
        height: 36px;
        background-color: #f2f3f6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-weight: 500;
        line-height: 36px;
        padding-left: 16px;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #333;
    }
</style>

<body>
    <div id="app" class="bgc-f2 pl-16 pr-16 pt-16" v-cloak>
        <div>
            <div class="ub ub-ac ub-sb mb-16">
                <div>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>账号列表</el-breadcrumb-item>
                        <el-breadcrumb-item>详情</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div>
                    <template v-if="userinfo.type <= user.type">
                        <template v-if="!edit">
                            <el-button type="primary" size="small" @click="editClick()" class="tx-14">编辑</el-button>
                        </template>
                        <template v-else>
                            <el-button @click="cancelClick()" size="small" class="tx-14" v-if="form.id">取 消</el-button>
                            <el-button type="primary" size="small" @click="sumbitClick()" class="tx-14">保存</el-button>
                        </template>
                    </template>
                </div>
            </div>
            <div class="tx-16 tx-w pb-12 pt-12 pl-15" style="background-color: rgb(234, 237, 244);">基本信息</div>
            <div class="bgc-wh pd24">
                <el-row :gutter="16">
                    <el-col :span="4">
                        <div>
                            <div class="tx-12 tx-66 mb-8">账号</div>
                            <div>
                                <el-input v-model="form.userName" size="small" clearable v-if="edit"></el-input>
                                <div class="mt-16" class="mt-4" v-else>{{user.userName}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <div class="tx-12 tx-66 mb-8">员工姓名</div>
                            <div>
                                <el-input v-model="form.name" size="small" clearable v-if="edit"></el-input>
                                <div class="mt-16" v-else>{{user.name}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <div class="tx-12 tx-66 mb-8">密码</div>
                            <div>
                                <el-input v-model="form.password" size="small" clearable v-if="edit"></el-input>
                                <div class="mt-16" v-else>{{user.password}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div>
                            <div class="tx-12 tx-66 mb-8">所属门店</div>
                            <div>
                                <template v-if="edit && userinfo.type == 1">
                                    <el-select v-model="form.htlId" placeholder="请选择门店" size="small"
                                        style="width: 100%;">
                                        <el-option v-for="item in hotels" :label="item.name" :value="item.id" clearable>
                                        </el-option>
                                    </el-select>
                                </template>
                                <div class="mt-16" v-else>{{getDictionary(hotels,'id',user.htlId,'name')}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <div class="tx-12 tx-66 mb-8">账号类型</div>
                            <div>
                                <template v-if="edit && userinfo.type == 1">
                                    <el-select v-model="form.type" placeholder="请选择类型" size="small"
                                        style="width: 100%;">
                                        <el-option v-for="item in types" :label="item.name" :value="item.id" clearable>
                                        </el-option>
                                    </el-select>
                                </template>
                                <div class="mt-16" v-else>{{user.type | typesStr}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <template v-if="user.type != 1">
                <div class="tx-16 tx-w pb-12 pt-12 pl-15 mt-20">权限设置</div>
                <el-tabs type="border-card">
                    <template v-for="(d1, i) in permissions" :key="i" v-if="edit">
                        <el-tab-pane :label="d1.name">
                            <div class="ml-5">
                                <div class="mb-8">
                                    <el-checkbox v-model="d1.checked" @change="handleCheckAllChange1(d1)"
                                        :indeterminate="d1.isIndeterminate">
                                        全选</el-checkbox>
                                </div>
                                <div class="br mb-16" v-for="(d2, index) in d1.children" :key="index">
                                    <div class="el-permission__content">
                                        <el-checkbox v-model="d2.checked" @change="handleCheckAllChange2(d1,d2)"
                                            :indeterminate="d2.isIndeterminate">{{d2.name}}
                                        </el-checkbox>
                                    </div>
                                    <div style="padding: 20px 12px 20px 23px;">
                                        <el-checkbox-group v-model="d1.checkArr">
                                            <el-checkbox v-for="d3 in d2.children" :label="d3.id" :key="d3.id"
                                                @change="handleCheckedCitiesChange(d1,d2,d3)">{{d3.name}}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </template>
                    <template v-for="(d1, i) in userPpermissions" :key="i" v-if="!edit">
                        <el-tab-pane :label="d1.name">
                            <div class="ml-5">
                                <div class="br mb-16" v-for="(d2, index) in d1.children" :key="index">
                                    <div class="el-permission__content">
                                        {{d2.name}}
                                    </div>
                                    <div style="padding: 20px 12px 20px 23px;" class="ub ub-ac">
                                        <div v-for="d3 in d2.children" style="margin-right: 30px;"
                                            v-if="d1.checkArr.includes(d3.id)">
                                            {{d3.name}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </template>
                </el-tabs>
            </template>
        </div>
    </div>
    <script type="text/babel">
        window.vm = new Vue({
            el: '#app',
            data: {
                edit: Pms.getParameter("id") ? false : true,
                user: {
                    id: Pms.getParameter("id"),
                    htlId: "",
                    type: "3",
                    userName: "",
                    password: "",
                    name: "",
                    status: 1,
                },
                userPpermissions: [],
                checkArr: [],
                permissions: [],
                permission: { id: "" },
                form: {},
                types: [],
                hotels: [],
                userinfo: Pms.getDate("userinfo", {}),
            },
            filters: {
                typesStr(val) {
                    if (Number(val) == 1) {
                        return "管理员"
                    }
                    if (Number(val) == 2) {
                        return "门店管理员"
                    }
                    if (Number(val) == 3) {
                        return "门店员工"
                    }
                }
            },
            mounted() {
            },
            created() {
                if (this.userinfo.type == 1) {
                    this.types = [
                        { id: "1", name: "管理员" },
                        { id: "2", name: "门店管理员" },
                        { id: "3", name: "门店员工" },
                    ]
                }
                if (this.userinfo.type == 2 || this.userinfo.type == 3) {
                    this.types = [
                        { id: "3", name: "门店员工" },
                    ]
                }

                this.getPermissionsList();
            },
            methods: {
                getPermissionsList: async function () {
                    // 获取酒店
                    let getHotel = await this.GET({ url: top.Config.curUrl + "/bst/bstHotel/list" });
                    if (getHotel.retcode == 200) { //如果返回码不是200则提示错误登录信息
                        this.hotels = getHotel.result.bstHotelList;
                        // 获取用户
                        let getUserPermission = [];
                        if (this.user.id) {
                            let getUser = await this.GET({ url: top.Config.curUrl + "/sys/sysUser/get", map: this.user });
                            if (getUser.retcode == 200) {
                                this.user = getUser.result.bean;
                                getUserPermission = await this.GET({ url: top.Config.curUrl + "/sys/sysFunctionPermissions/get", map: { userId: this.user.id } });
                                if (getUserPermission.result && getUserPermission.result.bean) {
                                    this.permission = getUserPermission.result.bean;
                                    getUserPermission = getUserPermission.result.bean.functinids ? getUserPermission.result.bean.functinids.split(",") : [];
                                } else {
                                    getUserPermission = [];
                                }
                            } else {
                                this.msgError(res.retmsg)
                            }
                        } else {
                            this.user.htlId = this.userinfo.htlId;
                            this.form = JSON.parse(JSON.stringify(this.user))
                        }
                        //获取权限列表
                        let permissionsRes = await this.GET({ url: top.Config.curUrl + "/sys/sysFunction/list" })
                        let permissions = permissionsRes.result.sysFunctionList;
                        // 只获取功能权限
                        permissions = permissions.filter(item => item.flag == 1 || item.flag == 0)
                        // 循环权限找到被用户勾选的权限,并将选中设为true
                        permissions.forEach((element, index) => {
                            element.checked = false;
                            if (getUserPermission.includes(element.id.toString())) { element.checked = true; }
                            // 已经选中的功能权限,默认空
                            if (element.pid == 0) { element.checkArr = []; }
                        });
                        // 处理成无限层级格式
                        permissions = WebUtil.handleLevel(permissions, "id", "pid", 2);
                        // 将选中的功能放进对应大功能checkArr
                        permissions = this.handLeCheckBox(permissions);
                        // 将permissions设置到Vue permissions里
                        this.$set(this.$data, 'permissions', permissions);
                        this.userPpermissions = JSON.parse(JSON.stringify(permissions))
                    } else { //如果返回码是200则登录成功
                        this.msgError(getHotel.retmsg)
                    }
                },
                // 遍历score，将选中项放入
                handLeCheckBox(score) {
                    let fn = function (item, arr) {
                        if (item.checked) { arr.push(item.id) }

                        if (item.children.length) {
                            let ckl = item.children.filter(d => d.checked).length;
                            if (ckl == item.children.length) { item.checked = true; }
                            else if (ckl > 0) { item.isIndeterminate = true; }
                        }

                        for (let i = 0; i < item.children.length; i++) {
                            const element = item.children[i];
                            fn(element, arr)
                        }
                        return arr
                    }
                    for (let i = 0; i < score.length; i++) {
                        let element = score[i]
                        if (element.pid == 0) {
                            element.checkArr = fn(element, []);
                            let ckl = element.children.filter(d => d.checked).length;

                            if (element.checkArr.length > 0) { element.isIndeterminate = true; }

                            if (element.checkArr.length == 0) { element.isIndeterminate = false; }

                            if (ckl == element.children.length) { element.checked = true; element.isIndeterminate = false; }
                        }
                    }

                    return score;
                },
                editClick() {
                    this.edit = true;
                    this.form = JSON.parse(JSON.stringify(this.user));
                    this.$set(this.$data, 'permissions', JSON.parse(JSON.stringify(this.userPpermissions)));
                },
                cancelClick() {
                    this.edit = false;
                },
                sumbitClick: async function () {
                    if (!this.form.name) return this.msgError("请填写员工姓名");
                    if (!this.form.password) return this.msgError("请填写员工密码");
                    if (!this.form.userName) return this.msgError("请填写员工账号");
                    if (!this.form.htlId) return this.msgError("请选择门店");
                    if (!this.form.type) return this.msgError("请选择账号类型");
                    this.startLoading("加载中", { background: "rgba(0, 0, 0, 0)" })
                    // 提交用户信息
                    let sumbit = await this.POST({ url: top.Config.curUrl + "/sys/sysUser/save", map: this.form })
                    if (sumbit.retcode == 200) {
                        let map = { userId: this.form.id, functinids: [], id: this.permission.id || "" }
                        this.permissions.forEach(element => { map.functinids = map.functinids.concat(element.checkArr) });
                        map.functinids = map.functinids.toString()
                        // 提交用户权限
                        sumbit = await this.POST({ url: top.Config.curUrl + "/sys/sysFunctionPermissions/save", map: map })
                        if (sumbit.retcode == 200) {
                            this.user = JSON.parse(JSON.stringify(this.form));
                            this.userPpermissions = JSON.parse(JSON.stringify(this.permissions))
                            this.edit = false;
                            this.msgSuccess("保存成功");
                            this.closeLoading();
                            // 如果改自己的账号信息
                            if (this.form.id == this.userinfo.id) {
                                sessionStorage["menuIndex"] = "";
                                sessionStorage["menuUrl"] = "";
                                top.location.reload();
                            }

                        } else {
                            this.msgError(sumbit.retmsg);
                        }
                    } else {
                        this.msgError(sumbit.retmsg);
                    }

                },
                // 根部全选
                handleCheckAllChange1(d1) {
                    d1.checkArr = [];
                    if (d1.checked) {
                        for (let i = 0; i < d1.children.length; i++) {
                            const d2 = d1.children[i];
                            d2.checked = true;
                            d2.isIndeterminate = false;
                            d1.checkArr = d1.checkArr.concat(d2.children.map(item => item.id))
                        }
                    } else {
                        for (let i = 0; i < d1.children.length; i++) {
                            const d2 = d1.children[i];
                            d2.checked = false;
                            d2.isIndeterminate = false;
                        }
                    }
                    d1.isIndeterminate = false;
                },
                // 次级全选
                handleCheckAllChange2(d1, d2) {
                    let dm = d2.children.map(item => item.id);
                    let flag = 0;
                    if (d2.checked) {
                        d1.checkArr = d1.checkArr.concat(dm);
                        // 是否全部选中
                        let ck = true;
                        // 循环判断是否全部选中
                        for (let i = 0; i < d1.children.length; i++) {
                            const d2 = d1.children[i];
                            const ckl = d2.children.filter(item => !d1.checkArr.includes(item.id));
                            if (ckl.length > 0) { ck = false; }
                        }
                        d1.checked = ck;
                        d2.isIndeterminate = false;
                        if (ck) { d1.isIndeterminate = false; flag++ }
                    } else {
                        d1.checked = false;
                        d1.checkArr = d1.checkArr.filter(item => !dm.includes(item))
                    }
                    if (!flag) { if (d1.checkArr.length == 0) { d1.isIndeterminate = false; } else { d1.isIndeterminate = true; } }
                },
                handleCheckedCitiesChange(d1, d2, d3) {
                    let rootChecked = true;
                    d1.children.forEach(ds2 => {
                        ds2.checked = false;
                        let ckl = ds2.children.filter(item => d1.checkArr.includes(item.id));
                        if (ckl.length == ds2.children.length) { ds2.checked = true; ds2.isIndeterminate = false; }

                        if (ckl.length != ds2.children.length) { ds2.isIndeterminate = true; }

                        if (ckl.length == 0) { ds2.isIndeterminate = false; }

                        if (d1.checkArr.length != 0) { d1.isIndeterminate = true; }
                        if (d1.checkArr.length == 0) { d1.isIndeterminate = false; }

                        if (ckl.length != ds2.children.length) { rootChecked = false; }
                    });

                    if (rootChecked) { d1.isIndeterminate = false; }

                    d1.checked = rootChecked;
                }
            }
        })

    </script>

</body>

</html>